<template>
    <el-dialog class="ui-storemgr-dlg" v-model="dialogVisible" :title="dialogTitle" ref="dialog" @opened="init" :beforeClose="beforeClose" @closed="finalThings">
        <el-form :model="data" :rules="rules" ref="elForm" @submit.prevent="onSure" label-width="5.5rem">
            <el-table :data="data" ref="dragabletable" class="move-storemgr-table" row-key="id">
                <el-table-column prop="id" label="id" width="60">
                    <template #default="scope">
                        <div style="display: flex;">
                            <el-icon 
                                :size="18"
                                class="storemgr_move_class"
                                style="cursor: pointer;margin-right: 5px;margin-top: 2px;"
                            >
                                <DCaret />
                            </el-icon>
                            <div>{{ scope.row.id }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="prop" label="类型" >
                    <template #default="scope">
                        <span v-racktype="scope.row.prop"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" ></el-table-column>
                <el-table-column prop="num" label="货物数" ></el-table-column>
                <el-table-column prop="name" label="操作" width="120">
                    <template #header>
                        <div style="text-align:center"><el-button link size="default" type="primary" @click="OnCreateStore()">添加</el-button></div>
                    </template>
                    <template #default="scope">
                        <el-button-group size="small">
                            <el-button type="primary" @click="onEdit(scope.row)">编辑</el-button>
                            <el-button :disabled="scope.row.def" type="danger" @click="onDelete(scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div v-loading="loading" :class="{'ui-dlg-loading':true, 'ui-dlg-loading-show': loading}" :element-loading-text="'请稍后...'"></div>
    </el-dialog>
</template>
<script>
import axios from 'axios';
import { reactive, computed, toRefs } from 'vue-demi';
import { UiShowDialog } from '../../uiframe/layout/components/CompFactory.vue';
import CreateStoreDialog from './CreateStoreDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { DCaret } from '@element-plus/icons-vue';
import Sortable from "sortablejs"
import { useSocket } from '../../uiframe/services/socket';
import directives from '../../uiframe/services/directives';

export default {
    directives,
    components:{
        DCaret
    },
    props:{
        q:Object,
        done: Function,
        payload:Array
    },
    setup:(props)=>{
        let changed = false;
        const 
        onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        data = reactive({
            loading:false,
            dialogVisible: true,
            dialogTitle:'仓库管理',
            dialog:null, elForm:null,
            dragabletable:null,
            data: JSON.parse(JSON.stringify(props.payload))
        }),rules =[

        ],
        methods = {
            onSure:()=>{
                data.dialogVisible = false;
            },
            onCancel:()=>{
                data.dialogVisible = false;
            },
            init:()=>{
                const tbody = data.dragabletable.$el.querySelector(`tbody`);
                Sortable.create(tbody, {
                    group: {
                        name: "name",
                        pull: true,
                        put: true,
                    },
                    handle: ".storemgr_move_class",
                    easing: 'cubic-bezier(1, 0, 0, 1)',
                    onEnd({oldIndex,newIndex}) {
                        let payload = [data.data[oldIndex].id, data.data[newIndex].id];
                        if (oldIndex !== newIndex) {
                            useSocket().then(socket=>socket.rpc('move_store', payload).then(res=>{
                                onmessage(res)
                                if(res.success) changed = true;
                            }).catch(res=>{
                                onfailure(res)
                            }))
                            const currRow = data.data.splice(oldIndex, 1)[0];
                            data.data.splice(newIndex, 0, currRow);
                        }
                    }
                });
            },
            beforeClose:(next)=>{
                next();
            },
            finalThings:()=>{
                if(changed) props.q.resolve({success:true,message:'', data:[]});
                props.done()
            },
            OnCreateStore:()=>{
                UiShowDialog(CreateStoreDialog, {}).then(res=>{
                    changed = true
                }).catch(res=>{})
            },
            onEdit:(row)=>{
                UiShowDialog(CreateStoreDialog, {payload:row}).then(res=>{})
            },
            onDelete:(row)=>{
                ElMessageBox.confirm(`您确定要删除名字为"${row.name}"的仓库么?`).then(()=>{
                    useSocket().then(socket=>socket.rpc('remove_store', {id:row.id}).then(res=>{
                        onmessage(res)
                        if(res.success){
                            changed = true;
                            data.data.splice(data.data.indexOf(row), 1);
                        }
                    }).catch(res=>{
                        onfailure(res)
                    }))
                }).catch(()=>{})
            }
        };

        return {
            ...toRefs(data),
            ...methods,
            rules
        }
    }
}
</script>
<style lang="scss">
.ui-storemgr-dlg{
    width:50rem;max-width: 50rem;
    .move-storemgr-table{
        user-select: none;
    }
}
</style>